import React, {useEffect, useState} from 'react';
import services from "./services";
import {Statistic} from 'antd';
import {LikeOutlined, CheckCircleOutlined, EditTwoTone, TrophyTwoTone, AudioOutlined} from '@ant-design/icons';
import ProgressAnalysis from "./analysis/ProgressAnalysis";
import ScoreAnalysis from "./analysis/ScoreAnalysis";
import CompletionTimeAnalysis from "./analysis/CompletionTimeAnalysis";
import EasyTypeAnalysis from "./analysis/EasyTypeAnalysis";

interface IconProps {
    type: string
}


const App = () => {
    const [overviewData, setOverviewData] = useState();

    useEffect(() => {
        services.overview().then(data => {
            console.log(data)
            setOverviewData(data);
        })
    }, []);

    const Icon = ({type}: IconProps) => {
        let icon
        switch (type) {
            case 'audio':
                icon = <AudioOutlined/>
                break
            default:
                icon = <AudioOutlined/>
        }
        return <div style={{position: 'absolute', top: '-20px', right: '-20px'}}>{icon}</div>
    }

    // @ts-ignore
    const RoundDiv = ({children, style, ...rest}) => {
        return <div style={{
            borderRadius: '10px',
            overflow: 'hidden',
            position: 'relative', ...style
        }} {...rest}>{children}</div>
    }


    // @ts-ignore
    return <div>
        <h1>总览图</h1>
        <div style={{
            backgroundColor: '#FDF8E9',
            padding: '20px',
            display: 'flex',
            flexWrap: 'wrap',
            gap: '20px',
            alignItems: 'center',
            marginTop: '30px'
        }}>
            <RoundDiv key={5} style={{flexBasis: '80%', flexGrow: 1, height: '120px'}}>
                <div style={{display: 'flex', justifyContent: 'center'}}>
                    <Statistic title="总课程数"
                        // @ts-ignore
                               value={overviewData?.totalCourseNumber} style={{margin: '0 160px'}}
                               prefix={<CheckCircleOutlined/>}/>
                    <Statistic title="作业总数"
                        // @ts-ignore
                               value={overviewData?.totalWorkNumber} style={{margin: '0 160px'}}
                               prefix={<EditTwoTone/>}/>
                    <Statistic title="学习记录总数"
                        // @ts-ignore
                               value={overviewData?.totalLearnRecordNumber} style={{margin: '0 160px'}}
                               prefix={<TrophyTwoTone/>}/>
                </div>
            </RoundDiv>
            <RoundDiv key={1} style={{flexBasis: '40%', flexGrow: 1, height: '300px', backgroundColor: '#ECEFF1'}}>
                {/*<h3 style={{ textAlign: 'center' }}>进度分析</h3>*/}
                <ProgressAnalysis
                    // @ts-ignore
                    progressData={overviewData?.allLearnRecord||[]}/>
            </RoundDiv>
            <RoundDiv key={2} style={{flexBasis: '40%', flexGrow: 1, height: '300px', backgroundColor: '#FAFAFA'}}>
                {/*<h3 style={{ textAlign: 'center' }}>分数统计</h3>*/}
                <ScoreAnalysis
                    // @ts-ignore
                    scores={overviewData?.allLearnRecord||[]}/>
            </RoundDiv>
            <RoundDiv key={3} style={{flexBasis: '40%', flexGrow: 1, height: '300px', backgroundColor: '#B0BEC5'}}>
                {/*<h3 style={{ textAlign: 'center'}}>完成时间</h3>*/}
                <CompletionTimeAnalysis
                    // @ts-ignore
                    learnRecords={overviewData?.allLearnRecord||[]}/>
            </RoundDiv>
            <RoundDiv key={4} style={{flexBasis: '40%', flexGrow: 1, height: '300px', backgroundColor: '#EEEEEE'}}>
                {/*<h3 style={{ textAlign: 'center'}}>难易程度</h3>*/}
                <EasyTypeAnalysis
                   // @ts-ignore
                   learnRecords={overviewData?.allLearnRecord||[]}/>
            </RoundDiv>
        </div>
    </div>
};

export default App;